<template>
  <div class="page has-navbar" v-nav="{ title: '走心花语', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <div>
        <tabs :tab-items="categories"
              :active-index.sync="activeCategoryIndex"
              position="top"
              bg-color="#ffffff"
              tab-color="assertive"
              v-bind:on-tab-click="onCategoryChanged"
              :tab-index=activeCategoryIndex
        ></tabs>
        <div class="tab-content">
            <list>
              <div class="list-item" v-for="(con , index) in content[activeCategoryIndex].cons" :key="index">
                <img src="../image/yuan.png" alt="" class="icon">
                <p>{{con}}</p>
              </div>
            </list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "FlowerHeartLang",
      data(){
        return{
          categories: [
            "情人节",
            "教师节",
            "父亲节",
            "母亲节",
          ],
          activeCategoryIndex: 0,
          content: [
            {
              index : 0,
              cons : [
                '有一种爱可以地久天长，有一种情可以地老天荒，有一个人会和你长长久久，陪你看朝霞晨露。那就是我！',
                '今天我又看见你了，你那样迷人，穿着格子背心，悠闲地走着，一副超然自在的样子，实在是可爱极了，真不知当年怎么就赛过兔子了呢？情人节快乐。',
                '情人节到了，送你一朵花表示我想你了，送你两朵花，表示我很想你，送你漫山遍野的花：还不快跑啊，大黄蜂被引来了。情人节快乐。',
              ]
            },
            {
              index : 2,
              cons : [
                  '教师节'
                ]
            },
            {
              index : 3,
              cons : [
                '父亲节'
              ]
            },
            {
              index : 4,
              cons : [
                '母亲节'
              ]
            },
          ]
        }
      },
      methods : {
        onCategoryChanged(activeIndex) {
          this.activeCategoryIndex = activeIndex;
        },
        back(){
          this.$router.go(-1)
        },
        menu(){

        }
      }
    }
</script>

<style scoped lang="less">
  .page-content{
    background: url("../image/bg.png") repeat-y;
    background-size: 100%;
  }
  .tab-item.active{
    color: red;
  }
.tab-content{
  margin-top: 65px;
  text-align: start;
  margin-left: 40px;
  .list-item{
    position: relative;
    line-height: 24px;
    color: #666666;
    img{
      position: absolute;
      width: 15px;
      left: -25px;
      top: 5px;
    }
  }

}
</style>
